<script setup>
  import {ref} from "vue";
  import useMain from "@/stores/modules/main";
  import {storeToRefs} from "pinia";

  const mainStore = useMain()
  const {startDateStr,endDateStr} = storeToRefs(mainStore)

  const inputText = ref('')
</script>

<template>
  <div class="searchBar">
    <div class="search">
      <div class="time">
        <div class="line">
          <div class="tip">住</div>
          <div class="text">{{ startDateStr('MM.DD') }}</div>
        </div>
        <div class="line">
          <div class="tip">离</div>
          <div class="text">{{ endDateStr('MM.DD') }}</div>
        </div>
      </div>
      <div class="searText">
        <input type="text" v-model="inputText" placeholder="关键字/位置/民宿"
               maxlength="40">
        <div class="icon">
          <van-icon name="search" size="20" color="var(--primary-color)"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .searchBar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    background: white;
    height: 70px;
    padding: 10px;
    border-bottom: var(--auxiliary-gray-line);
    box-sizing: border-box;

    div {
      display: flex;
    }

    .search {
      width: 100%;
      height: 100%;
      background: var(--auxiliary-back-color);
      border-radius: var(--card-border-radius);

      .time {
        height: 100%;
        position: relative;
        font-size: 10px;
        padding: 8px 10px;
        flex-direction: column;
        justify-content: space-around;
        box-sizing: border-box;

        &:after {
          position: absolute;
          content: '';
          width: 1px;
          height: 100%;
          right: 0;
          top: 0;
          background: white;
        }

        .line {
          display: flex;

          .tip {
            color: var(--auxiliary-text-color);
          }

          .text {
            margin-left: 5px;
          }
        }
      }

      .searText {
        width: 100%;
        align-items: center;

        input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
          color: var(--auxiliary-text-color);
        }


        input {
          width: 85%;
          height: 100%;
          padding: 0 0 0 5px;
          flex-shrink: 0;
        }

        .icon {
          width: 15%;
          justify-content: center;
        }
      }
    }
  }
</style>